<template>
  <el-col :span="12" class="container-right">
    <div class="title">青岛市政务服务分布图</div>
    <el-row>
      <el-col :span="7">
        <div class="panel-left-1">
          <div class="serviceTimesBox">
            <div class="tit">基层便民服务场所总数</div>
            <ul style="margin-bottom: 0;">
              <li v-for="(item, index) in servicePlaceArr" :key="index" :style="(index+1) % 3 === 0 ? 'margin-right: 10px': 'margin-right: 5px;'">{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="panel-left-2 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-esTrend.png" width="28px" />基层便民服务场所</div>
            <div id="myChart_7" :style="{width: '100%', height: '330px'}"></div>
          </div>
        </div>
        <div class="panel-left-3 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-esTrend.png" width="28px" />基层便民服务事项数</div>
            <div id="myChart_8" :style="{width: '100%', height: '360px'}"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="panel-middle-1">
          <div class="subTit"><i class="el-icon-location-information" style="font-size: 30px;"></i>政务服务导航图</div>
          <div id="myChart_11" :style="{width: '100%', height: '840px'}"></div>
          <div class="tuli">
            <div><span style="background: #4649f1;"></span>市区级政务服务大厅</div>
            <div><span class="zhenjie"></span>镇街级便民服务中心</div>
            <div><i class="el-icon-location"></i>政务服务自助终端网点</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="panel-right-1">
          <div class="serviceTimesBox">
            <div class="tit">自助终端累计服务次数</div>
            <ul style="margin-bottom: 0;">
              <li v-for="(item, index) in automaticServiceTimesArr" :key="index" :style="(index+1) % 3 === 0 ? 'margin-right: 10px': 'margin-right: 5px;'">{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="panel-right-2 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <!-- 关系图 -->
          <div id="myChart_10" :style="{width: '100%', height: '320px'}"></div>
        </div>
        <div class="panel-right-3 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-industryShare.png" width="28px" />各区(市)自助终端基层分布情况</div>
            <div id="myChart_9" :style="{width: '100%', height: '240px'}"></div>
          </div>
        </div>
        <div class="panel-right-4 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit">
              <img src="../../assets/icon/icon-enterpriseTotalNum.png" width="28px" />
              政银合作自助服务情况——<span style="color: #CCFF44;font-weight: 600;">{{ zzfwData.dictLabel }}</span>
            </div>
            <div class="receptionBox">
              <el-col :span="8" class="item">
                <span class="tit">网点数</span>
                <div class="num">{{ zzfwData.one }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">终端数</span>
                <div class="num">{{ zzfwData.two }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">可办事项数</span>
                <div class="num">{{ zzfwData.three }}</div>
              </el-col>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
import QDMapJson from '../../assets/echartMap-QD.json'

export default {
  name: 'govService',
  data () {
    return {
      servicePlaceArr: [], // 基层便民服务场所总数

      bmfwData_x: [], // “基层便民服务场所”x轴数据
      bmfwData_y_zj: [], // “基层便民服务场所”y轴“镇街级”数据
      bmfwData_y_sq: [], // “基层便民服务场所”y轴“社区级”数据

      spdtData_x: [], // “基层便民服务事项数”x轴数据
      spdtData_y_zj: [], // “基层便民服务事项数”y轴“镇街级”数据
      spdtData_y_sq: [], // “基层便民服务事项数”y轴“社区级”数据

      mapData: [], // 地图点位"市区级政务服务大厅"数据
      mapData_2: [], // 地图点位"镇街级便民服务中心"数据
      mapData_3: [], // 地图点位"政务服务自助终端网点"数据

      automaticServiceTimesArr: [], // 自助终端累计服务次数

      diagramData: [], // 关系图数据
      diagramLineData: [], // 关系图line数组数据

      zzzdwdData_x: [], // “各区(市)自助终端基层分布情况”x轴数据
      zzzdwdData_y_zj: [], // “各区(市)自助终端基层分布情况”y轴“镇街数”数据
      zzzdwdData_y_sq: [], // “各区(市)自助终端基层分布情况”y轴“终端数”数据
      
      zzfwDataArr: [], //  政银合作自助服务情况
      zzfwData: {}, //  政银合作自助服务情况
      bjlJumpTime: 0,
      dataidx: 0
    }
  },
  mounted() {
    this.getQDMapData() // 获取政务服务导航图数据
    this.getBmfwTotalData() // 获取“基层便民服务场所-总数”数据
    this.getBmfwData() // 获取“基层便民服务场所”数据
    this.getSpdtData() // 获取“基层便民服务事项数”数据
    this.getSelfServiceMachineData() // 获取“各区(市)自助终端基层分布情况”数据
    this.getLjfwcsTotalData() // 获取“自助终端累计服务次数”数据
    this.getDiagramData() // 获取“关系图”数据
    // this.renderChart_diagram() // 关系图
    // this.getBjlJumpTime() // 政银合作自助服务情况 刷新时间
    this.getZzfwData() // 政银合作自助服务情况
  },
  methods: {
    // 获取“基层便民服务场所-总数”数据
    getBmfwTotalData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryServiceArena', {
        params: {
          dictType: 'convenient_arena'
        }
      }).then(res => {
        let result = res.body.data
        result === null ? this.servicePlaceArr = [] : this.servicePlaceArr = result.toString().split("")
      }).catch(() => {})
    },
    // 获取“基层便民服务场所”数据
    getBmfwData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryService', {
        params: {
          dictType: 'convenient_arena',
          eparchyCode: 'eparchy'
        }
      }).then(res => {
        let result = res.body.data
        result.map(item => {
          this.bmfwData_x.push(item.dictLabel)
          this.bmfwData_y_zj.push(item.one)
          this.bmfwData_y_sq.push(item.two)
        })
        this.renderChart_bmfw()
      }).catch(() => {})
    },
    // 基层便民服务场所
    renderChart_bmfw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_7'))

      let option = {
        legend: {
          left: 'center',
          bottom: 0,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#fff',
            fontSize: 20
          },
        },
        grid: [{
          top: '4%',
          left: '4%',
          width: '35%',
          containLabel: true,
          bottom: '7%'
        }, {
          top: '2%',
          left: '52%',
          width: '0%',
          bottom: '17%'
        }, {
          top: '4%',
          right: '5%',
          width: '35%',
          containLabel: true,
          bottom: '5%'
        }],
        xAxis: [{
          type: 'value',
          inverse: true,
          axisLabel: {
            show: true,
            fontSize: 16,
            color: '#fff',
            fontWeight: 700,
            interval: 0,  
            rotate: 35
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }, {
          gridIndex: 1,
          show: true
        }, {
          gridIndex: 2,
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 16,
            color: '#fff',
            fontWeight: 700,
            interval: 0,  
            rotate: -35
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        yAxis: [{
            position: 'right',
            axisLabel: {
              show: false
            },
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(218, 219, 219, 0.1)'
              }
            },
            axisTick: {
              show: false
            }
          }, {
            gridIndex: 1,
            position: 'center',
            axisLabel: {
              textStyle: {
                align: 'center',
                padding: [15, 0, 0, 0],
                fontSize: 18,
                color: '#fff',
                fontWeight: 700,
              }
            },
            type: 'category',
            inverse: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // data: ['莱西市', '平度市', '胶州市', '即墨区', '西海岸新区', '城阳区', '崂山区', '李沧区', '市北区', '市南区'],
            data: this.bmfwData_x
          }, {
            gridIndex: 2,
            position: 'left',
            axisLabel: {
              show: false
            },
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(218, 219, 219, 0.1)'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [{
            name: '镇(街道)级',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#8FFCA0' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0BCBFB' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 0, 0, 4]
              }
            },
            label: {
              position: 'left',
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 18,
              distance: 4,
              color: '#fff'
            },
            data: this.bmfwData_y_zj
            // data: [12, 17, 12, 17, 23, 8, 5, 11, 22, 11],
          }, {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '村（社区）级',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#EB4C27' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFBE1E' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 4, 4, 0]
              }
            },
            type: 'bar',
            barWidth: 15,
            label: {
              position: 'right',
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 18,
              distance: 4,
              color: '#fff'
            },
            data: this.bmfwData_y_sq
            // data: [92, 79, 74, 1219, 255, 453, 25, 119, 137, 50],
          }
        ]
      }
      myChart.setOption(option)
    },

    // 获取“基层便民服务事项数”数据
    getSpdtData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryService', {
        params: {
          dictType: 'convenient_item',
          eparchyCode: 'eparchy'
        }
      }).then(res => {
        let result = res.body.data
        result.map(item => {
          this.spdtData_x.push(item.dictLabel)
          this.spdtData_y_zj.push(item.one)
          this.spdtData_y_sq.push(item.two)
        })
        this.renderChart_spdt()
      }).catch(() => {})
    },
    // 基层便民服务事项数
    renderChart_spdt() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_8'))
      let option = {
        legend: {
          right: '0%',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 23,
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          left: '0%',
          right: '6%',
          bottom: '-5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.spdtData_x,
          // data: ['市南区', '市北区', '李沧区', '崂山区', '西海岸新区', '城阳区', '即墨区', '胶州市', '平度市', '莱西市'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: -40, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
              fontWeight: 700
            },
            margin: 20,
            formatter:function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                  }

              } else {
                  newParamsName = params;
              }
              return newParamsName
            },
          },
        }],
        yAxis: [{
          type: 'value',
          name: '个',
          nameTextStyle:{
            color: '#fff', 
            fontSize: 23
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 22,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        series: [
          {
            name: '镇(街道)级',
            type: 'bar',
            data: this.spdtData_y_zj,
            // data: [81, 119, 34, 120, 129, 71, 75, 93, 62, 98],
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [-7, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FFBE1E' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#EB4C27' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '村(社区)级',
            type: 'bar',
            data: this.spdtData_y_sq,
            // data: [53, 23, 25, 62, 50, 40, 23, 23, 23, 48],
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [0, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#B034FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4245FA' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },

    // 获取政务服务导航图数据
    getQDMapData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/get-serviceSite-list', {}).then(res => {
        res.data.data.map(item => {
          item.map(childItem => {
            if (childItem.location !== null) {
              childItem.name = childItem.address
              childItem.value = childItem.location.split(',')
            }
          })
        })
        this.mapData = res.data.data

        this.renderChart_QDMap() // 政务服务导航图
      }).catch(() => {})
    },
    // 政务服务导航图
    renderChart_QDMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_11'))

      this.$echarts.registerMap('qingdao', QDMapJson)

      let option = {
        visualMap: {
          show: false,
          x: 'left',
          y: 'center',
          seriesIndex: [1],
          min: 0,
          max: 500,
          text: ['高', '低'], // 文本，默认为数值文本
          textStyle: {
            color: '#fff'
          },
          inRange: {
          }
        },
        geo: {
          show: true,
          map: "qingdao",
          label: {
            normal: {
              show: false,
              color: "#fff"
            },
            emphasis: {
              show: false,
              color: "#fff"
            }
          },
          zoom: 1.25,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#060f39",
              borderWidth: 1,
              borderColor: "#016BBC"
            },
            emphasis: {
              areaColor: "rgba(107, 176, 207, .6)"
            }
          }
        },
        series: [
          {
            name: '市区级',
            type: "effectScatter", // effectScatter scatter
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: 'top',
                backgroundColor: 'rgba(40, 75, 247, .8)', // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: '#f7fafb',
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 700,
                  }
                },
              },
            },
            data: this.mapData[0],
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#4649f1', // 打点颜色
                shadowBlur: 5,
                shadowColor: '#4649f1'
              }
            },
          }, {
            name: '镇街级',
            type: "scatter", // effectScatter 
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: 'top',
                backgroundColor: 'rgba(40, 75, 247, .8)', // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: '#f7fafb',
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 700,
                  }
                },
              },
            },
            data: this.mapData[1],
            symbol: 'arrow',
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#e93f42',
                shadowBlur: 5,
                shadowColor: '#f00'
              }
            },
          }, {
            name: '自助终端网点',
            type: 'scatter', // scatter effectScatter
            coordinateSystem: 'geo',
            symbol: 'pin', // 点的形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            geoIndex: 0,
            symbolSize: 15,
            itemStyle: {
              normal: {
                color: '#fffe86', //标志颜色 D8BC37
              }
            },
            data: this.mapData[2],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }, {
            type: "map",
            mapType: "qingdao",
            aspectScale: 0.75,
            zoom: 1.25,
            // geoIndex: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#333',
                  fontSize: 18,
                  fontWeight: 700
                },
                formatter: function(val) {
                  let { name, value } = val
                  return `${name}`
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#fff", // "#9dc6d6",
                areaColor: "rgba(138, 198, 253)", // 地图区域颜色 rgba(138, 198, 253)
                // color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8', '#d6e9fd']
              },
              emphasis: { // 鼠标悬浮时，区块颜色
                areaColor: "#45A5F8",
              }
            },
            animation: false,
            data: [
              { "name": "市北区", "value": 381 },
              { "name": "市南区", "value": 212 },
              { "name": "李沧区", "value": 322 },
              { "name": "西海岸新区", "value": 41 },
              { "name": "城阳区", "value": 44 },
              { "name": "崂山区", "value": 32 },
              { "name": "即墨区", "value": 52 },
              { "name": "西海岸新区", "value": 41 },
              { "name": "平度市", "value": 23 },
              { "name": "莱西市", "value": 64 },
              { "name": "胶南市", "value": 12 }
            ]
          }
        ]
      }
      myChart.setOption(option, true)
    },

    // 获取“自助终端累计服务次数”数据
    getLjfwcsTotalData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'terminal_service_count'
        }
      }).then(res => {
        let result = res.body.data[0].value
        result === null ? this.automaticServiceTimesArr = [] : this.automaticServiceTimesArr = result.toString().split("")
      }).catch(() => {})
    },

    // 获取“关系图”数据
    getDiagramData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/handling/queryBusiness', {}).then(res => {
        let result = res.body.data
        let arr_data = []
        let arr_line = []
        result.map(item => {
          // 关系图data数组数据
          let obj = {
            name: item.business,
            draggable: false, // 是否可以拖动
            category: 1,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   {
                    offset: 0,
                    color: "#005bb0"
                  },
                  {
                    offset: 1,
                    color: "#4796f6"
                  }
                ])
              }
            }
          }
          arr_data.push(obj)

          // 连线数组
          let obj_line = {
            target: item.business,
            source: result[0].business
          }
          arr_line.push(obj_line)
        })

        // 配置中心圆样式及位置
        arr_data[0].symbolSize = [200, 80], // 设置椭圆形大小
        arr_data[0].label = { // 设置椭圆形大小
          normal: {
            show: true,
            position: "inside",
            textStyle: {
              fontSize: 22,
              fontWeight: 700,
              color: '#040f3d' // 字体颜色 
            }
          }
        },
        arr_data[0].itemStyle = {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#35c2ff"
              },
              {
                offset: 1,
                color: "#96f6ff"
              }
            ])
          }
        }
        arr_data[0].x = 320
        arr_data[0].y = 160

        // 配置周围圆位置
        arr_data[1].x = 380
        arr_data[1].y = 220
        arr_data[2].x = 240
        arr_data[2].y = 220
        arr_data[3].x = 480
        arr_data[3].y = 160
        arr_data[4].x = 160
        arr_data[4].y = 160
        arr_data[5].x = 380
        arr_data[5].y = 90
        arr_data[6].x = 240
        arr_data[6].y = 90

        this.diagramData = arr_data
        this.diagramLineData = arr_line

        this.renderChart_diagram()
      }).catch(() => {})
    },
    // 关系图
    renderChart_diagram() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_10'))
      let option = {
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: {
          show: false,
          type: "value"
        },
        series: [{
          type: "graph",
          draggable: false, // 指示节点是否可以拖动
          layout: "none", // 设置为none，在data中设置x&y值，固定点位置 
          symbolSize: [100, 58],
          roam: false, // 是否开启鼠标缩放和平移漫游
          label: {
            normal: {
              show: true,
              position: "inside",
              textStyle: {
                fontSize: 22,
                fontWeight: 700,
                color: '#eef3ff' // 字体颜色 adecff
              }
            }
          },
          data: this.diagramData,
          links: this.diagramLineData,
          lineStyle: {
            normal: {
              opacity: 1,
              width: 2,
              curveness: 0.2,
            }
          },
          animationEasingUpdate: "quinticInOut",
          animationDurationUpdate: 1500,
        }],
      }
      myChart.setOption(option, true)
    },

    // 获取“各区(市)自助终端基层分布情况”数据
    getSelfServiceMachineData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryService', {
        params: {
          dictType: 'terminal_basic',
          eparchyCode: 'eparchy'
        }
      }).then(res => {
        let result = res.body.data

        result.map(item => {
          this.zzzdwdData_x.push(item.dictLabel)
          this.zzzdwdData_y_zj.push(item.one)
          this.zzzdwdData_y_sq.push(item.two)
        })

        this.renderChart_selfServiceMachine()
      }).catch(() => {})
    },
    // 各区(市)自助终端基层分布情况
    renderChart_selfServiceMachine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_9'))
      // 绘制图表
      let option = {
        legend: {
          right: '0%',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 23,
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          left: '0%',
          right: '6%',
          bottom: '-8%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.zzzdwdData_x,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: -40, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
              fontWeight: 700
            },
            margin: 20,
            formatter:function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                  }

              } else {
                  newParamsName = params;
              }
              return newParamsName
            },
          },
        }],
        yAxis: [{
          type: 'value',
          name: '个',
          nameTextStyle:{
            color: '#fff', 
            fontSize: 23
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 22,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        series: [
          {
            name: '镇街数',
            type: 'bar',
            data: this.zzzdwdData_y_zj,
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [-7, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FB7099' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FEDC45' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '终端数',
            type: 'bar',
            data: this.zzzdwdData_y_sq,
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [0, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#0088FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00F2FE' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },

    // 获取 政银合作自助服务情况 切换时间
    getBjlJumpTime() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/params', {
        params: {
          paramCode: 1006
        }
      }).then(res => {
        let result = res.body.data
        this.bjlJumpTime = result
        this.$nextTick(() => {
          this.changeData()
        })
      }).catch(() => {})
    },
    // 政银合作自助服务情况
    getZzfwData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryService', {
        params: {
          dictType: 'service_bank',
          eparchyCode: 'terminal_service_bank'
        }
      }).then(res => {
        let result = res.body.data
        this.zzfwDataArr = result
        this.zzfwData = result[0]
        this.getBjlJumpTime()
      }).catch(() => {})
    },
    changeData() {
      setInterval(() => {
        this.dataidx = this.dataidx === 2 ? 0 : this.dataidx + 1
        this.zzfwData = this.zzfwDataArr[this.dataidx]
      }, 1000 * this.bjlJumpTime)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.item-box-container {
  position: relative;
  .angle-left-top {
    left: 0;
    top: 0;
    border-top: 1px solid #037c93;
    border-left: 1px solid #037c93;
  }

  .angle-left-bottom {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #037c93;
    border-left: 1px solid #037c93;
  }

  .angle-right-top {
    right: 0;
    top: 0;
    border-top: 1px solid #037c93;
    border-right: 1px solid #037c93;
  }

  .angle-right-bottom {
    bottom: 0;
    right: 0;
    border-right: 1px solid #037c93;
    border-bottom: 1px solid #037c93;
  }
}
.title {
  height: 93px;
  background: url('../../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 25px 0;
  background-size: 100% 100%;
  // background-position-y: 25px;
}

.container-right {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }


  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 服务次数
  .panel-left-1, .panel-right-1 {
    height: 55px;
    margin-bottom: 15px;

    .serviceTimesBox {
      overflow: hidden;
      padding: 0 0 20px 0;

      .tit {
        font-size: 25px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        float: left;
        margin: 10px 20px 10px 0;
      }
      ul {
        overflow: hidden;
        margin-bottom: 20px;
        float: left;
      }
      ul li {
        float: left;
        width: 36px;
        height: 56px;
        background: #002870;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #00FFF0;
        text-align: center;
        margin-right: 5px;
      }
    }
  }

  // 基层便民服务场所
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    // height: 452px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 584px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 559px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   top: 584px;
    //   left: 559px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 基层便民服务事项数
  .panel-left-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 430px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 0;    
    //   bottom: 12px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 559px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   left: 559px;    
    //   bottom: 12px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 关系图
  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 330px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 641px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 641px;
    //   top: 422px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 0;
    //   top: 422px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 各区(市)自助终端基层分布情况
  .panel-right-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 330px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 641px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 641px;
    //   bottom: 253px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 253px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 政银合作自助服务情况
  .panel-right-4 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 180px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 641px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 641px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .receptionBox {
      text-align: center;

      .item {
        padding-top: 20px;
        .tit {
          font-size: 27px;
          font-weight: 700;
        }

        .num {
          font-size: 38px;
          margin-top: 10px;
          color: #CCFF44;
          font-weight: 600;
        }
      }
    }
  }

  .panel-middle-1 {
    height: 530px;
    padding: 25px;
    margin-bottom: 15px;

    .tuli {
      width: 300px;
      font-size: 24px;
      position: relative;
      left: 55%;
      bottom: 24%;

      span {
        position: relative;
        top: 2px;
        right: 10px;
        border-radius: 50%;
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e93f42;
      }
      .zhenjie {
        position: relative;
        top: 10px;
        right: 10px;
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 0;
        background: #e93f42;
        transform: rotate(45deg);
        &::before {
          content: '';
          position: absolute;
          background-color: #050f3b;
          top: 0px;
          left: 0px;
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
      }
      i {
        color: #fffe86;
        font-size: 26px;
        position: relative;
        right: 10px;
      }
    }
  }
}
</style>